import { ref, computed, reactive, getCurrentInstance } from "vue"
import { defineStore } from "pinia"
import Cookies from 'js-cookie'

// 创建名为 "Collapse" 的状态管理 store
export const useCollapseStore = defineStore("Collapse", () => {
    // 创建一个响应式数据 isCollapse
    const isCollapse = ref(true)
    // 处理折叠/展开的方法
    function handleCollapse() {
        isCollapse.value = !isCollapse.value
        // console.log(isCollapse)
    }
    // 返回 store 的属性
    return { isCollapse, handleCollapse }
})

// 创建名为 "SelectMenu" 的状态管理 store
export const useSelectMenu = defineStore('SelectMenu', () => {
    // 创建响应式数据 currentMenu 和 tabsList
    let currentMenu = ref(null)
    let tabsList = reactive([
        {
            path: '/',
            name: 'home',
            label: '首页',
            icon: 'home',
        }
    ])
    // 选择菜单的方法
    function selectMenu(val) {


        // 如果选择的是 'home'，将 currentMenu 设置为 'null'
        if (val.name === 'home') {
            currentMenu.value = 'null'
        } else {
            //1.面包屑内容：
            // 如果选择的不是 'home'
            // 更新 currentMenu 为当前选择的菜单项
            currentMenu.value = val

            //2.header下面的tags内容：
            // 在 tabsList 列表中查找是否已经有了这个名字
            let result = tabsList.findIndex(item => item.name === val.name)
            // 如果找不到，将当前菜单项添加到 tabsList
            result === -1 ? tabsList.push(val) : null
        }
    }
    // 关闭标签页的方法
    function closeTab(val) {
        // 在 tabsList 中查找要关闭的标签的索引
        let res = tabsList.findIndex(item => item.name === val.name)
        // 从 tabsList 中移除找到的标签
        tabsList.splice(res, 1)
        console.log('pinia tabsList', tabsList)


    }
    // 返回 store 的属性
    return { selectMenu, closeTab, currentMenu, tabsList }

})

// 创建名为 "AsideMenu" 的状态管理 store(包含动态引入侧边菜单、动态路由、退出登录功能)
export const useAsideMenu = defineStore("AsideMenu", () => {
    const menu = reactive([])

    function handleAsideMenu(val) {
        // console.log('val', val)
        //清空menu
        menu.length = 0
        val.forEach((item) => {
            menu.push(item)
        })

        localStorage.setItem('menu', JSON.stringify(val))
        // console.log('menu', menu)
    }

    //从localStorage获取数据，防止页面刷新数据丢失
    function addMenu(router) {
        if (!localStorage.getItem('menu')) {
            return
        }
        //清空menu
        menu.length = 0
        const menuStorage = reactive(JSON.parse(localStorage.getItem('menu')))
        Object.assign(menu, menuStorage)

        //动态路由
        const menuArray = []

        menu.forEach(item => {
            if (item.children) {
                item.children = item.children.map(item => {
                    let url = `../views/${item.url}.vue`

                    item.component = () => import(url)
                    return item
                })
                menuArray.push(...item.children)
            } else {
                let url = `../views/${item.url}.vue`
                item.component = () => import(url)
                menuArray.push(item)
            }
        })

        menuArray.forEach(item => {
            router.addRoute('home1', item)
        })

    }
    //退出登录
    function cleanMenu() {
        menu.length = 0
        localStorage.removeItem('menu')
        // console.log('cleanMenu')
    }


    return { menu, handleAsideMenu, addMenu, cleanMenu }
})

//token(和views的login联动)
export const useToken = defineStore('token', () => {
    let token = ''
    function setToken(val) {
        // console.log('beforeSet', token)
        token = val
        Cookies.set('token', val)
        // console.log('AfterSet', token)

    }
    //暂时停用，直接在main里面使用Cookies.get('token')
    // function getToken() {
    //     token = token || Cookies.get('token')
    //     // console.log('token getTkoen', token)

    // }
    function clearToken() {
        token = ''
        Cookies.remove('token')
    }
    return { setToken, clearToken }
})
